<template>
  <div class="">
    <el-table
      show-summary
      :data="tableData"
      max-height="300"
      style="width: 100% height:300px"
      :span-method="objectSpanMethod"
      :summary-method="getSummaries"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="产品" width="180"> </el-table-column>
      <el-table-column prop="ghs" label="供货商"> </el-table-column>
      <el-table-column sortable prop="KunCun" label="库存(个)">
      </el-table-column>
      <el-table-column sortable prop="yiShous" label="已售(个)">
      </el-table-column>
      <el-table-column sortable prop="danJia" label="单价(元)">
      </el-table-column>
      <el-table-column sortable prop="LiRui" label="利润(元)">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Tongji",
  data() {
    return {
      tableData: [
        {
          date: "2019-12-17",
          name: "无籽西瓜",
          ghs: "大兴西瓜",
          KunCun: "2",
          yiShous: "20",
          danJia: "15",
          LiRui: "13.5"
        },
        {
          date: "2019-12-17",
          name: "哈密瓜",
          ghs: "新疆哈密",
          KunCun: "200",
          yiShous: "10",
          danJia: "35",
          LiRui: "30"
        },
        {
          date: "2019-12-17",
          name: "富士苹果",
          ghs: "日本富士山",
          KunCun: "1000",
          yiShous: "1",
          danJia: "60",
          LiRui: "650"
        },
        {
          date: "2019-12-17",
          name: "榴莲",
          ghs: "泰国阿三",
          KunCun: "23",
          yiShous: "5",
          danJia: "150",
          LiRui: "120"
        },
        {
          date: "2019-12-17",
          name: "芭蕉",
          ghs: "广西南宁",
          KunCun: "5",
          yiShous: "3",
          danJia: "10",
          LiRui: "8"
        },
        {
          date: "2019-12-17",
          name: "番石榴",
          ghs: "桂林",
          KunCun: "34",
          yiShous: "10",
          danJia: "300",
          LiRui: "20"
        },
        {
          date: "2019-12-17",
          name: "猕猴桃",
          ghs: "广西",
          KunCun: "19",
          yiShous: "14",
          danJia: "30",
          LiRui: "25"
        }
      ]
    };
  },

  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "无";
        }
      });

      return sums;
    },
    //合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 8 === 0) {
          return {
            rowspan: 8,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style></style>
